<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/groupon/libs/common.css">
<style>
    #decorate-list {
        font-family: Source Han Sans SC;
        padding: 0 0px 30px;
        background: #fff;
        border-radius: 10px 10px 0px 0px;
        overflow: auto;
    }

    .btn-common {
        width: 80px;
        height: 30px;
        line-height: 30px;
        border-radius: 4px;
        font-size: 13px;
        text-align: center;
        cursor: pointer;
        display: inline-block;
    }

    .opt-status {
        cursor: pointer;
    }

    .opt-decorate {
        color: #7536D0;
        margin-right: 20px;
    }

    .opt-delete {
        color: #FF5000;
    }


    .el-dialog {
        width: 480px;
    }

    .el-dialog__header {
        border-radius: 10px 10px 0 0;
    }

    .custom-items {
        display: flex;
        align-items: center;
        height: 46px;
    }

    .custom-titles {
        width: 92px;
    }

    .custom-btn {
        justify-content: flex-end;
    }

    .custom-btn-1 {
        color: #7438D5;
        line-height: 36px;
    }

    .custom-btn-2 {
        width: 88px;
        height: 36px;
        background: #7438D5;
        border-radius: 4px;
        font-size: 16px;
        color: #fff;
        line-height: 36px;
    }

    .opt-edit {
        color: #18d3a9;
    }

    .opt-copy {
        color: #444;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/groupon/libs/vue.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/groupon/libs/moment.js"></script>
<div id="decorate-list" v-cloak>
    <div class="common-header-container">
        专题页面
    </div>
    <div class="common-button-container">
        <div class="common-button common-add-button" @click="operation('create',null,null)">
            <i class="el-icon-plus" style="margin-right: 5px;font-size:13px;"></i>
            新建页面
        </div>
    </div>
    <div class="common-table-container">
        <el-table :data="decorateList" border>
            <el-table-column prop="name" label="页面名称" width="200">
            </el-table-column>
            <el-table-column prop="memo" label="备注" width="300">
            </el-table-column>
            <el-table-column prop="updatetime" label="最后修改时间" width="300">
                <template slot-scope="scope">
                    {{moment(scope.row.updatetime*1000).format("YYYY-MM-DD HH:mm:ss")}}
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" min-width="240">
                <template slot-scope="scope">
                    <div>
                        <span class="opt-status opt-decorate"
                            @click="operation('decorate',scope.row.id,scope.row.type,scope.row.name)">装修</span>
                        <span class="opt-status opt-decorate opt-edit"
                            @click="operation('edit',scope.row.id,scope.row.type)">编辑</span>
                        <span class="opt-status opt-decorate opt-copy"
                            @click="operation('copy',scope.row.id,scope.row.type)">复制</span>
                        <span class="opt-status opt-delete"
                            @click="operation('delete',scope.row.id,scope.row.type)">删除</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 创建自定义 -->
    <div class="dialog-isbutton-container">
        <el-dialog :title="editId?'编辑页面':'新建页面'" :visible.sync="customDialog" :before-close="customClose">
            <div class="dialog-container">
                <div class="custom-items">
                    <div class="custom-titles">页面名称</div>
                    <el-input type="text" placeholder="最多可输入10个字" v-model="customTem.name" maxlength="10" size="medium">
                    </el-input>
                </div>
                <div class="custom-items">
                    <div class="custom-titles">备注</div>
                    <el-input type="text" placeholder="最多可输入10个字" v-model="customTem.memo" maxlength="10" size="medium">
                    </el-input>
                </div>
            </div>
            <div class="dialog-button-container">
                <div class="dialog-button dialog-button-cancel" @click="customClose">取消</div>
                <div class="dialog-button dialog-button-define" @click="customClose('yes')">确定</div>
            </div>
        </el-dialog>
    </div>
</div>